<template>
  <q-page class="q-pa-md">
    <q-card>
      <q-table title="关卡管理" :rows="checkpoint_list" :columns="columns" row-key="" v-model:pagination="pagination">

        <template v-slot:top-right>
          <q-btn @click="addCustomer()" size="lg" color="primary" class="q-mr-xs" label="添加"/>
          <q-btn @click="addCustomer()" size="lg" color="deep-orange" class="q-mr-xs" label="保存"/>
        </template>

        <template v-slot:body-cell-pic="props">
          <q-td :props="props">
            <q-img :src="props.row.pic" style="max-width: 100px"></q-img>
          </q-td>
        </template>

        <template v-slot:body-cell-pic2="props">
          <q-td :props="props">
            <q-img :src="props.row.pic2" style="max-width: 100px"></q-img>
          </q-td>
        </template>

        <template v-slot:body-cell-action="props">
          <q-td :props="props">
            <div class="q-gutter-sm">
              <q-btn dense outline size="sm" color="primary" icon="edit" @click="editCheckpoint(props.row)"/>
              <q-btn dense outline size="sm" color="red" icon="delete" @click="onRemoveInfo(props.row)"/>
            </div>
          </q-td>
        </template>
      </q-table>
    </q-card>

    <q-dialog v-model="viewCustomer">
      <q-card bordered class="my-card">
        <q-card-section class="bg-primary text-white full-width">
          <div class="text-h6 q-px-md">
            {{ addFlag ? '添加数据' : '编辑数据' }}
            <q-btn round flat dense icon="close" class="float-right" color="grey-8" v-close-popup></q-btn>
          </div>
        </q-card-section>
        <q-separator class="q-px-md" inset></q-separator>

        <q-card-section class="q-pt-md full-width">
          <q-list>
            <q-item>
              <q-item-section>
                <q-input v-model="checkpoint.code" label="编码"/>
              </q-item-section>
            </q-item>

            <q-item>
              <q-item-section>
                <q-input v-model="checkpoint.name" label="名称"/>
              </q-item-section>
            </q-item>

            <q-item>
              <q-item-section>
                <q-input v-model="checkpoint.gps" label="GPS"/>
              </q-item-section>
            </q-item>

            <q-item>
              <q-item-section>
                <q-input v-model="checkpoint.group" label="GROUP"/>
              </q-item-section>
            </q-item>

            <q-item>
              <q-item-section>
                <q-input type="number" v-model="checkpoint.sort" label="排序"/>
              </q-item-section>
            </q-item>

            <q-item>
              <q-item-section>
                <q-input v-model="checkpoint.memo" label="说明"/>
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>

        <q-card-section class="q-pt-md full-width">
          <upload-image v-model="checkpoint.pic" title="未启用状态"></upload-image>
        </q-card-section>

        <q-card-section class="q-pt-md full-width">
          <upload-image v-model="checkpoint.pic2" title="未启用状态"></upload-image>
        </q-card-section>

        <q-card-actions>
          <q-btn color="secondary" @click="onResetInfo">重置</q-btn>
          <q-btn color="primary" @click="onSaveInfo">保存</q-btn>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-page>
</template>

<script setup>
import {getCurrentInstance, onMounted, ref, toRef} from "vue";
import {getCheckpointList, saveCheckpointList} from "src/utils/config";
import UploadImage from "components/UploadImage.vue";
import {useRouter} from "vue-router";

let checkpoint = ref({
  "code": "",
  "name": "",
  "memo": "",
  "sort": 0,
  "status": 0,
  "pic": "",
  "pic2": "",
  "gps": "",
  "display": false,
  "group": "MAIN",
})
let checkpoint_list = ref([])

// table config
const columns = ref([
  {
    name: "name",
    required: true,
    label: "名称",
    align: "left",
    field: "name",
    sortable: true,
  },
  {
    name: "code",
    required: false,
    label: "编码",
    align: "left",
    field: "code",
    sortable: true,
  },
  {
    name: "memo",
    required: true,
    label: "说明",
    align: "left",
    field: "memo",
    sortable: true,
  },
  {
    name: "pic",
    label: "图片",
    align: "left",
    field: "pic",
  },
  {
    name: "pic2",
    label: "图片2",
    align: "left",
    field: "pic2",
  },
  {
    name: "action",
    align: "left",
    label: "Action",
    field: "action",
    sortable: true
  }
])
const pagination = ref({
  rowsPerPage: 20,
})
const viewCustomer = ref(false)
const addFlag = ref(false)

onMounted(() => {
  const $router = useRouter();
  const group_id = typeof ($router.currentRoute.value.query.code) === "undefined" ? 'MAIN' : $router.currentRoute.value.query.code
  console.log('group id', group_id)

  const list = getCheckpointList()
  let temp_list = []
  // const group_id = 'MAIN'
  list.forEach(function (checkpoint) {
    if (checkpoint.group === group_id) {
      temp_list.push(checkpoint)
    }
  })
  checkpoint_list.value = temp_list
  // console.log(list)
});

function addCustomer() {
  console.log('value', checkpoint_list.value)
}

function editCheckpoint(e) {
  // console.log(e)
  checkpoint.value = e
  viewCustomer.value = true
}

function onResetInfo() {

}

function onRemoveInfo(e) {
  console.log('remove', e)
  e.delete()
}

function toRefs(obj) {
  const ret = {}
  // 使用for...in 循环遍历对象
  for (const key in obj) {
    // 逐个调用toRef完成转换
    ret[key] = toRef(obj, key).value
  }
  return ret
}

function onSaveInfo() {
  let temp_info = {...toRefs(checkpoint.value)}
  // console.log(temp_info)
  const checkpoint_list = getCheckpointList()
  checkpoint_list.forEach(function (checkpoint, index) {
    if (checkpoint.code === temp_info.code) {
      checkpoint_list[index] = temp_info
    }
  })
  console.log('new list', checkpoint_list)
  saveCheckpointList(checkpoint_list)
  viewCustomer.value = false
}

function onUploadPic() {
  console.log(getCurrentInstance())
  // console.log(checkpoint.value.pic)
  // uploadCloudFile(checkpoint.value.pic)
}

</script>

<style lang="sass" scoped>
.my-card
  width: 100%
  max-width: 900px
</style>
